import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    Button,
    ImageBackground,
    Dimensions,
    StyleSheet,
    ScrollView
} from 'react-native'
import Swiper from 'react-native-swiper'
import ImageCard from '../../components/ImageCard'
//import { ScrollView } from 'react-native-gesture-handler';
const {width} = Dimensions.get('window');
export default class HomePage extends Component {

    render() {//<Text>这是首页</Text>
        return (
            <View style={styles.container}>
                
                
                <View style={styles.wrapper}>
                <Swiper 
                    showsButtons={false}
                    autoplay={true}
                >
                    <View style={styles.slide1}>
                        <Image source={{uri:'http://img.midoogame.com/appindex/2018/12/carousel_micon20181228165610_7.png'}} style={styles.image}/>
                    </View>
                    <View style={styles.slide2}>
                        <Image source={{uri:'http://img.midoogame.com/appindex/2019/02/carousel_micon20190216092908_2.jpg'}} style={styles.image}/>
                    </View>
                    <View style={styles.slide3}>
                        <Image source={{uri:'http://img.midoogame.com/appindex/2019/02/carousel_micon20190215164832_8.jpg'}} style={styles.image}/>
                    </View>
                </Swiper>
                </View>
                <View 
                    style={{marginTop:20}}
                >
                    <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    >
                        {
                            [0,1,2,3].map((el,index)=>
                                <ImageCard imgUrl={{uri:'http://via.placeholder.com/130x130'}} text={`hello-${index}`} key={index}/>
                            )
                        }
                    </ScrollView>
                </View>
                <View style={{marginTop:20}}>
                <Button
                    title="Go to Mine"
                    onPress={() => this.props.navigation.navigate('sideBar')}
                />
                </View>
                
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        //flexDirection: 'column',
        /*justifyContent: 'center',
        alignItems: 'center',*/
    },
    wrapper:{
        
        /*width:410, */
        height:220,
    },
    image:{
        flex:1,
        resizeMode:"stretch",
        width:width
    },
    slide1: {
        /*width:'100%',
        height:'100%',*/
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',/**/
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',/**/
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});